import React, { useEffect, useRef } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
import { Col, Row, Card, Statistic } from 'antd';
import { ArrowUpOutlined } from '@ant-design/icons'
import * as echarts from 'echarts';
export default function DashBoard() {
  // 初始化地图
  let map = null;
  const initMap = () => {
    AMapLoader.load({
      "key": "f579df58dc9a00ea84e51da05f8c24de",              // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": ['AMap.PlaceSearch', 'AMap.Geolocation'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
      map = new AMap.Map('map', {
        zoom: 15
      });
      // 标记点
      const marker = new AMap.Marker({
        title: '合肥火车站',
        icon: 'https://t13.baidu.com/it/u=3714489291,912983121&fm=58&app=83&size=w931&n=0&f=JPEG&fmt=auto?s=911AA3756653526102ACB47703009060&sec=1672246800&t=9cfac36d7490fe482c737332797c6623',
        position: [117.318685, 31.886795]//位置
      })
      map.add(marker)
      // 还以通过add方法 添加 折线图 圆圈 多边形等等
      // 定义插件
      var placeSearch = new AMap.PlaceSearch({
        // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
        city: '合肥'
      });
      placeSearch.search('spa', (status, result) => {
        console.log(result);
      })
      // 创建定位插件
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量
        offset: [10, 20],
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        position: 'RB'
      })

      geolocation.getCurrentPosition(function (status, result) {
        console.log(status);
        console.log(result);
      })
    }).catch(e => {
      console.log('地图初始化失败');
    })
  }
  // 初始化echarts
  const chartRef = useRef();
  let chart = null;
  const initChart = () => {
    chart = echarts.init(chartRef.current);
    // 设置 配置项 setOption
    chart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {
        axisPointer: {
          type: 'cross'
        },
        trigger: 'axis',
        formatter: '{a0}{b0}{c0}件<br/> {a1}{b1}{c1}元'
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '利润',
          type: 'line',
          smooth: true,
          data: [12, 3, 9, 8, 2, 45]
        }
      ]
    })
  }
  useEffect(() => {
    initMap();
    initChart();
  }, [])
  return (
    <Card title="仪表盘">
      <Row gutter={10}>
        <Col span={6}>
          <div>
            <Card>
              <Statistic
                title="xxx数据"
                value={11.28}
                precision={2}
                valueStyle={{ color: '#3f8600' }}
                prefix={<ArrowUpOutlined />}
                suffix="%"
              />
            </Card>
          </div>
        </Col>
        <Col span={6}>
          <div>
            <Card>
              <Statistic
                title="销售额"
                value={234567}

              />
            </Card>
          </div>
        </Col>
        <Col span={6}>
          <div>
            <Card>
              <Statistic
                title="利润"
                value={123232}

              />
            </Card>
          </div>
        </Col>
        <Col span={6}>
          <div>
            <Card>
              <Statistic
                title="xxxx"
                value={23}

              />
            </Card>
          </div>
        </Col>
      </Row>

      <Row>
        <Col span={12}>
          <div id='map' style={{ height: 400 }}></div>
        </Col>
        <Col span={12}>
          <div ref={chartRef} style={{ height: 400 }}></div>
        </Col>
      </Row>
    </Card>
  )
}
